<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>父传子</title>
</head>
<body>

<!--
  props属性值类型：
   字符串String
   数值Number
   布尔值Boolean
   数组Array
   对象Object
-->

<div id="app">
  <menu-item
    :pstr="pstr"
    :pnum="pnum"
    :pbool="pbool"
    :parr="parr"
    :pobj="pobj"
  >

  </menu-item>

</div>

<script src="../lib/vue.js"></script>
<script>
  Vue.component('menu-item', {
    props: ['pstr', 'pnum', 'pbool', 'parr', 'pobj'],
    template: `
      <div>
        <div>{{typeof pstr}} : {{pstr}}</div>
        <div>{{typeof pnum}} : {{pnum}}</div>
        <div>{{typeof pbool}} : {{pbool}}</div>
        <div>{{typeof parr}} : {{parr}}</div>
        <ul>
          <li v-for="item in parr">{{item}}</li>
        </ul>
        <div>{{typeof pobj}} : {{pobj}}</div>
        <ul>
          <li v-for="item in pobj">{{item}}</li>
        </ul>
      </div>`
  })


  let vm = new Vue({
    el: '#app',
    data: {
      pstr: '我是一个字符串',
      pnum: 18,
      pbool: true,
      parr: ['apple', 'orange', 'banana'],
      pobj: {
        name: '张三',
        age: 18,
        sex: '男'
      }
    }
  })
</script>

</body>
</html>